import React from 'react';
import { Form, Input, InputNumber, Switch, Space, Card, Button, FormInstance } from 'antd';
import { PlusOutlined, DeleteOutlined } from '@ant-design/icons';

interface FillBlankFormProps {
  form: FormInstance;
}

const FillBlankForm: React.FC<FillBlankFormProps> = ({ form }) => {
  const [blankCount, setBlankCount] = React.useState(
    form.getFieldValue('blank_count') || 1
  );

  // 更新空的数量
  const handleBlankCountChange = (count: number) => {
    setBlankCount(count);
    form.setFieldsValue({ blank_count: count });
    
    // 更新答案数组长度
    const currentAnswers = form.getFieldValue('correct_answers') || [];
    const newAnswers = Array(count).fill('').map((_, i) => currentAnswers[i] || '');
    form.setFieldsValue({ correct_answers: newAnswers });
  };

  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      <Card size="small" title="填空设置">
        <Space direction="vertical" style={{ width: '100%' }}>
          <Form.Item
            label="填空数量"
            required
          >
            <InputNumber
              min={1}
              max={20}
              value={blankCount}
              onChange={(value) => handleBlankCountChange(value || 1)}
              style={{ width: 150 }}
            />
          </Form.Item>

          <Form.Item
            name="case_sensitive"
            label="区分大小写"
            valuePropName="checked"
          >
            <Switch checkedChildren="是" unCheckedChildren="否" />
          </Form.Item>
        </Space>
      </Card>

      {/* 隐藏字段 */}
      <Form.Item name="blank_count" hidden>
        <InputNumber />
      </Form.Item>

      <Card size="small" title="标准答案">
        <Space direction="vertical" style={{ width: '100%' }}>
          <div style={{ color: '#666', marginBottom: 12 }}>
            请为每个空填写标准答案，答题时将与标准答案进行比对
          </div>
          
          {Array.from({ length: blankCount }).map((_, index) => (
            <Form.Item
              key={index}
              label={`第 ${index + 1} 空答案`}
              name={['correct_answers', index]}
              rules={[{ required: true, message: `请输入第${index + 1}空的答案` }]}
            >
              <Input placeholder={`第${index + 1}空的标准答案`} />
            </Form.Item>
          ))}
        </Space>
      </Card>
    </Space>
  );
};

export default FillBlankForm;

